<template>
  <div>
    <a-card class="cardBox " :tab-list="tabList" :active-tab-key="noTitleKey" @tabChange="key => onTabChange(key, 'noTitleKey')">
      <!--<div class="tit" slot="title">理论/制度成果</div>-->
      <div class="content" style="height: 355px">
        <div v-if="noTitleKey==='tab1'">
          <ul class="files">
            <li v-for="(item, i) in filesData" :key="i" @click="filesRowClick(item)">
              <span>{{i+1}}</span><p class="ellipsis">{{item.name}}</p>
            </li>
          </ul>
        </div>
        <div v-if="noTitleKey==='tab2'">
          <ul class="files">
            <li v-for="(item, i) in filesData2" :key="i" @click="filesRowClick(item)">
              <span>{{i+1}}</span><p class="ellipsis">{{item.name}}</p>
            </li>
          </ul>
        </div>
        <div v-if="noTitleKey==='tab3'">
          <ul class="files">
            <li v-for="(item, i) in filesData3" :key="i" style="cursor: default;">
              <span>{{i+1}}</span><p class="ellipsis">{{item.name}}</p>
            </li>
          </ul>
        </div>
      </div>
    </a-card>
    <a-modal v-model="filesVisible" width="88%" :footer="null" :centered="true" :title="filesTitle">
      <div class="modalContent">
        <img v-if="filesImgSrc===1" src="@/assets/img/pic1.png" class="filesImg">
        <img v-if="filesImgSrc===2" src="@/assets/img/pic2.png" class="filesImg">
        <img v-if="filesImgSrc===3" src="@/assets/img/pic3.png" class="filesImg">
        <img v-if="filesImgSrc===4" src="@/assets/img/pic4.png" class="filesImg">
        <img v-if="filesImgSrc===5" src="@/assets/img/pic5.png" class="filesImg">
        <img v-if="filesImgSrc===6" src="@/assets/img/pic6.png" class="filesImg">
      </div>
    </a-modal>
  </div>
</template>

<script>
  export default {
    name: 'HytBoard9',
    data () {
      return {
        filesVisible: false,
        filesTitle: '',
        filesImgSrc: '',
        noTitleKey: 'tab1',
        tabList: [
          {
            key: 'tab1',
            tab: '理论成果'
          },
          {
            key: 'tab2',
            tab: '制度成果'
          },
          {
            key: 'tab3',
            tab: '推广成果'
          }
        ],
        filesData: [
          { id: 1, name: '中国·横店影视文化产业集聚区指数', flag: 1 },
          { id: 2, name: '中国·横店影视文化产业发展环境指数', flag: 1 },
          { id: 3, name: '中国·横店影视文化产业影响力指数', flag: 1 },
          { id: 4, name: '中国·横店影视文化产业创新指数', flag: 1 },
          { id: 5, name: '中国·横店影视文化产业国际性指数', flag: 1 },
          { id: 6, name: '中国·横店影视文化产业综合景气指数', flag: 1 }
        ],
        filesData2: [
          { id: 1, name: '影视拍摄“一件事”工作指南', flag: 0 },
          { id: 2, name: '横店影视文化产业综合调查制度', flag: 0 },
          { id: 3, name: '横漂演员公约', flag: 0 },
          { id: 4, name: '剧组临时党支部规范化建设的指导意见', flag: 0 },
          { id: 5, name: '影视拍摄基地服务规范', flag: 0 },
          { id: 6, name: '横店影视产业人才基金实施办法', flag: 0 },
          { id: 7, name: '关于促进横店影视文化产业高质量发展的补充意见', flag: 0 }
        ],
        filesData3: [
          { id: 1, name: '(头版)浙江日报《这个“大脑”很懂戏 东阳开发特色应用助力影视业高质量发展》(11月15日)', flag: 0 },
          { id: 2, name: '浙江新闻《2021中国（横店）影视文化产业发展大会召开 聚焦人才、指数和“大脑”》(10月22日)', flag: 0 },
          { id: 3, name: '新华财经《横店影视文化产业大脑亮相 推动产业治理数据智能化》(10月22日)', flag: 0 },
          { id: 4, name: '环球网《2021中国（横店）影视文化产业发展大会召开 聚焦人才、指数和“大脑”》(10月24日)', flag: 0 },
          { id: 5, name: '金华政务网《实现全产业链数字化 推动治理数据智能化  产业大脑赋能横店影视文化加速跑》(10月25日)', flag: 0 },
          { id: 6, name: '广州日报《横店“大脑系统”提供影视文化产业新经验，影视“全产业链”智能迭代》(11月15日)', flag: 0 },
          { id: 7, name: '浙江省人民政府官网首页热点关注《东阳开发特色应用助力影视业高质量发展 这个“大脑”很懂戏》(11月15日)', flag: 0 }
        ]
      }
    },
    mounted () {

    },
    watch: {
    },
    methods: {
      onTabChange (key, type) {
        this[type] = key
      },
      filesRowClick (data) {
        if (!data.flag) {
          this.warning()
          return
        }
        this.filesVisible = true
        this.filesTitle = data.name
        this.filesImgSrc = data.id
      },
      warning () {
        this.$message.warning('涉密不公开')
      }
    }
  }
</script>

<style scoped lang="less">
  .cardBox {
    margin-bottom: 16px;
    box-shadow: 0 0 12px rgba(0,0,0,.15);
    .tit {
      position: relative;
      padding-left: 8px; font-size: 18px;
    }

    .tit::before {
      display: inline-block;
      content: '';
      width: 2px;
      position: absolute;
      left: 0;
      top: 2px;
      bottom: 2px;
      background: #1890ff
    }
  }
  .files {
    li { border-bottom: 1px solid #ddd; display: flex; padding: 10px 8px; cursor: pointer}
    span {display: inline-block; background-color: #00BAFF; border-radius: 3px;
      padding: 0px 3px; color: #fff;}
    p {margin-bottom: 0; padding-left: 8px; font-size: 15px;}
  }
  .modalContent
  .filesImg {max-width: 100%; display: block; margin: auto}
  .ellipsis{overflow: hidden; text-overflow:ellipsis;
    white-space: nowrap;}
</style>
